<template>
	<view class="page">
		<view v-if="!isWorker" class="box">
			<view class="header-box">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
			</view>
			<view class="body-box">
				<view class="indet">
					<view class="indet-item" v-for="(item,index) in indetList" @click="toIndent(item.status)"
						:key="index">
						<uni-badge class="uni-badge-left-margin" :text="item.count" absolute="rightTop" :offset="[3, 3]"
							size="small">
							<image :src="`../../static/my/icon_${index + 1}.png`" mode=""></image>
						</uni-badge>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="my-item" @click="toPage('/subPackages/healthRecord/healthRecord')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/icon_health_report.png"></image>
						<text>健康档案</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/kinship/kinship')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/icon_relation.png"></image>
						<text>亲情绑定</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/myJoin/myJoin')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/join.png"></image>
						<text>我参与的</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/myCollect/myCollect')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/collect.png"></image>
						<text>我的收藏</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/address/address')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/dizhi.png"></image>
						<text>收货地址</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/agreement/agreement')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/yinsi.png"></image>
						<text>隐私条款</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
			</view>
			<view class="user-box" @click="toPage('/subPackages/userInfo/userInfo?type=userInfo')">
				<image :src="ylUserInfo.image ? ylUserInfo.image : '../../static/header.jpg'" mode=""></image>
				<view class="flex alignC" style="height: 40rpx;line-height: 40rpx;">
					<view v-if="ylUserInfo.username!=null" style="font-size: 32rpx;color: #fff;">
						{{ylUserInfo.nickName ||'微信用户'}}</view>
					<text v-else style="font-size: 32rpx;color: #fff;"
						@click.stop="toPage('/subPackages/login/login')">去登录</text>
					<view><u-icon name="arrow-right" color="#fff"></u-icon></view>
				</view>
			</view>
		</view>
		<view v-else class="box">
			<view class="header-box">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
			</view>
			<view class="body-box">
				<view class="my-item" @click="toPage('/subPackages/indent/indent?title=用户')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/icon_order.png"></image>
						<text>用户订单</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/doorService/doorService')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/icon_door_service.png"></image>
						<text>上门服务</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/healthRecord/workerRecord')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/icon_uploadCase.png"></image>
						<text>上传病例</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/verifyOrder/verifyOrder')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/my/icon_verify.png"></image>
						<text>核销订单</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<view class="my-item" @click="toPage('/subPackages/agreement/agreement')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/yinsi.png"></image>
						<text>隐私条款</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view> 
				<!-- <view class="my-item" @click="toPage('/subPackages/video/video')">
					<view style="display: flex;align-items: center;">
						<image class="my-item-image" src="/static/yinsi.png"></image>
						<text>视频监控</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view> -->
				
			</view>
			<view class="user-box" @click="toPage('/subPackages/userInfo/userInfo?type=userInfo')">
				<image :src="ylUserInfo.image ? ylUserInfo.image : '../../static/header.jpg'" mode=""></image>
				<view class="flex-col alignC" style="height: 40rpx;line-height: 40rpx;align-items: baseline;">
					<view v-if="isWorker" class="worker-tag-v">员工</view>
					<view>
						<view v-if="ylUserInfo.username!=null" style="font-size: 32rpx;color: #fff;">
							{{ylUserInfo.nickName ||'微信用户'}}</view>
						<text v-else style="font-size: 32rpx;color: #fff;"
							@click.stop="toPage('/subPackages/login/login')">去登录</text>
						<view><u-icon name="arrow-right" color="#fff"></u-icon></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getUserInfoApi,
		getAccessTokenApi,
		getminiCodeApi
	} from '../../common/API/userInfoApi.js'
	import {
		getClassApi
	} from '../../common/API/goodsApi.js'
	import {
		getOrderCountApi
	} from '../../common/API/orderApi.js'
	export default {
		components: {},
		data() {
			return {
				list: ['收藏', '关注', '积分', '优惠券'],
				wh: 0,
				userInfo: {},
				capsule: {},
				indetList: [{
						name: '待支付',
						count: 0,
						status: '0'
					}, {
						name: '待发货',
						count: 0,
						status: '1'
					},
					{
						name: '待收货/使用',
						count: 0,
						status: '2,3,16',
					},
					{
						name: '退款',
						count: 0,
						status: '6,7'
					},
					{
						name: '全部订单',
						count: 0,
						status: ''
					}
				],
				CodeUrl: '',
				MyClass: [],
				show: false,
				content: '是否确认退出登录',
				isWorker: false
			};
		},
		computed: {
			...mapState('user', ['ylPhone', 'ylUserId', 'ylUserInfo', 'ylToken', 'ylEnterprise'])
		},
		methods: {
			...mapMutations('user', ['MusetUserId', 'MusetUserInfo', 'MudelToken']),
			handleChange(data) {
				const index = data.detail.index
			},
			async getUserInfo(callback) {
				const res = await getUserInfoApi()
				if (res.status === 200) {
					this.MusetUserInfo(res.data)
				} else {
					wx.showToast({
						title: res.message
					})
					wx.hideToast()
				}
				callback && callback()
			},
			toPage(path) {
				wx.navigateTo({
					url: path
				})
			},
			toIndent(status) {
				wx.navigateTo({
					url: `/subPackages/indent/indent?status=${status}`
				})
			},
			async getMyClass(callback) {
				const res = await getClassApi(this.ylEnterprise.enterpriseCode, '2')
				if (res.status === 200) {
					this.MyClass = res.data
				} else {
					uni.$showMsg(res.message)
				}
				callback && callback()
			},
			async getOrderCount() {
				const res = await getOrderCountApi()
				const allCount = Object.values(res.data.allCount)[0]
				const waitPayCount = Object.values(res.data.waitPayCount)[0]
				const waitShippedCount = Object.values(res.data.waitShippedCount)[0]
				const waitReceivedCount = Object.values(res.data.waitReceivedCount)[0]
				const refundPayCount = Object.values(res.data.refundPayCount)[0]
				this.indetList[0].count = waitPayCount
				this.indetList[1].count = waitShippedCount
				this.indetList[2].count = waitReceivedCount
				this.indetList[3].count = refundPayCount
				this.indetList[4].count = allCount
			},
			tosubPackages() {
				uni.navigateTo({
					url: '/subPackages/integral/integral'
				})
			},
			toMember() {
				uni.navigateTo({
					url: '/subPackages/member/member'
				})
			},
			toPages(index) {
				switch (index) {
					case 0:
						break;
					case 1:
						break;
					case 2:
						// uni.navigateTo({
						// 	url: '/subPackages/integral/integral'
						// })
						break;
					case 3:
						break;
				}
			},
			async logout() {
				this.show = true;
			},
			confirm() {
				uni.reLaunch({
					url: '/pages/home/home'
				})
				this.MudelToken()
			},
			toDeclaration() {
				uni.navigateTo({
					url: '/subPackages/declaration/declaration'
				})
			}
		},
		async onShow() {
			if (uni.getStorageSync('ylToken')) {
				this.getOrderCount()
				this.getMyClass()
				this.getUserInfo()
				if (this.ylUserInfo.type != '1') {
					this.isWorker = true
				}
			}
		},
		onLoad() {
			//右上角胶囊高度
			this.capsule = wx.getMenuButtonBoundingClientRect()
		},
		async onPullDownRefresh() {
			await this.getOrderCount()
			await this.getMyClass(uni.stopPullDownRefresh)
		}

	}
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
	}

	/deep/ .uni-grid-item--border-top {
		border: 0;
	}

	.box {

		button {
			margin: 0 30rpx;
		}

		.grid-box {
			padding: 20rpx 0;
		}
	}

	.grid-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.header-box {
		background: #0091D7;
		width: 100%;
		height: 316rpx;
		background-size: 100% 100%;

		.grid-box {
			display: flex;
			justify-content: space-between;

			.grid-item-box {
				width: 188rpx;
				height: 136rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			margin-bottom: 16rpx;
		}

	}

	/deep/ .uni-grid {
		border: 0;
	}

	.indet {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 30rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 30rpx;

		.indet-item {
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			align-items: center;
			// width: 22%;
			padding-bottom: 6rpx;
			font-size: 28rpx;

			image {
				width: 76rpx;
				height: 76rpx;
			}
		}
	}

	.body-box {
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		padding: 36rpx 24rpx;
		margin-top: -30rpx;
		background: #f8f8f8;
	}

	.user-box {
		margin-top: 150rpx;
		display: flex;
		align-items: center;
		position: absolute;
		top: 30rpx;

		image {
			width: 128rpx;
			height: 128rpx;
			margin: 0 32rpx;
			border-radius: 50%;
		}

		view {
			display: flex;
			// flex-direction: column;
			justify-content: center;

			text {
				font-weight: 500;
				font-size: 34rpx;

				&:last-child {
					font-size: 24rpx;
				}
			}
		}
	}

	.my-item {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 24rpx 0rpx;

		image {
			width: 44rpx;
			height: 44rpx;
			opacity: .8;
		}

		text {
			margin-left: 32rpx;
		}
	}

	.worker-tag-v {
		position: absolute;
		top: 6rpx;
		width: 72rpx;
		height: 34rpx;
		background: #FF7B40;
		border-radius: 20rpx 20rpx 20rpx 0rpx;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF;
		font-size: 24rpx;
		align-items: center;
	}
</style>